<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框</title>
		<style>
			/*选择器：抓取页面上的元素，给元素添加效果【添加一个样式】   元素选择器*/
			div{
				/*边框复合属性    生成一个像素实线橙色的边框*/
				border: 1px solid #ffaa00;
				width: 500px;
				height: 500px;
			}
			/*需求：第二个 div 边框颜色改成黑色*/
			/*id选择器  html元素前标记 加id="别名"
			           css中 #别名 抓到元素
			class选择器  html元素前标记 加 class="别名1，别名2"
			            css中，别名  抓到元素
			*/
			#小日子{
				border: 1px solid #f00;
				background-color: #ff0;
				/*子属性：border-width 边框样式属性*/
				border-style: dotted;
				/* 虚线  双实线 */
				border-style: dashed;
				border-style: double;
				/*子属性：border-width 边框的颜色属性*/
				border-color: #ffaa00;
			}
			.d5{
				/*border边框属性【复合属性】：width style color*/
				border: 30px solid #f00;
				/*子属性：border-width 边框的宽度属性*/
				/*需求：第三个div 40像素*/
				border-width: 40px;
				/*需求：上边框宽度20px  点线*/
				border-top:20px dotted #f00;
				/*需求：上边框加颜色*/
				border-top-color: #ff0;
				/*需求：下边框宽度调整为1px*/
				border-bottom-width: 1px;
				/*需求：左边框双实线效果*/
				border-left-style: double;
				/*右边框 5px 虚线 绿色*/
				border-right: 5px dashed #0f0;
			}
			/*border-radius边框倒角属性:边框或者背景颜色
			画圆：宽高和倒角一致
			border-radius属性值：1个值  代表  上 右  下  左  【顺时针】
			                    2个值  代表  上 下 / 右 左  【顺时针】
								3个值  代表  上 / 右 左 /下 【顺时针】
								4个值  代表  上/右 /下 /左  【顺时针】
			*/
			.d4{
				border: 10px solid #f00;
				border-radius: 50%;
			}
			
			/*练习:画圆  4个颜色，鼠标悬停 旋转
			       第三div 添加 悬停效果---伪类选择器：追加效果
				                          语法：任意选择器：hover  悬停效果  功能
			*/
			#d6{
				border: 10px solid #f00;
				border-color:#0f0 #f00 #ff0 #ffaa00;
				border-radius: 50%;
				/*过度属性：悬停效果增加过渡时间*/
				transition: transform 10s;
			}
			/*第三个div追加悬停效果*/
			#d6:hover{
				/*效果：旋转*/
				/*旋转属性：属性值*/
				transform: rotate(3600deg);
			}
		</style>
	</head>
	<body>
		<!-- 有宽没高的空间   
		 css边框的使用----选择器
		 -->
		<div></div>
		<div id="小日子"></div>
		<div class="d3 d4 d5"></div>
		<div id="d6"></div>
	</body>
</html>